<template>

  <ga-modal :width="240" :visible="visible" :mask="false" :footer="false" title="新增功能" body-class="topo-tip-body" :body-style="{padding: '16px 34px'}"
    popup-container=".tip-button" class="tip-modal" :align-center="false" :top="164" @cancel="() => $emit('on-close')">
    <img src="@/assets/images/topology/topo-tip.png"
      style="width: 130px; height: 94px; margin: 0 auto; display: block" />
    <div class="topo-tip-text">按住ctrl键可以框选
      多个拓扑节点</div>
    <ga-button type="primary" @click="() => $emit('on-close')" long>确定</ga-button>
  </ga-modal>
  <!-- <div class="tip-modal">
    <section class="tip-modal-header"></section>
    <section class="tip-modal-body">
      <img src="@/assets/images/topology/topo-tip.png" style="width: 130px; height: 94px;" />
    <div class="topo-tip-text">按住ctrl键可以框选
      多个拓扑节点</div>
    <ga-button type="primary" @click="() => $emit('on-close')">确定</ga-button>
    </section>
  </div> -->
</template>

<script setup>
const props = defineProps({
  visible: Boolean
})
const emits = defineEmits(['on-close'])
</script>

<style scoped lang="scss">
:deep(.garco-modal) {

  box-shadow: 0px 0px 7.3px rgba(0, 0, 0, 0.25);

}

.topo-tip-body {
  margin: 0 auto;
  .topo-tip-text {
    margin: 16px 0;
    color: rgba(46, 64, 94, 1);
    font-family: "PingFang SC";
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 4%;
  }
}
</style>
